<template>
  <div v-if=this.showMe>

  <!-- <h1>播放列表</h1> -->
    <van-row>
    <van-col span="20">
      <van-cell-group inset>
          <van-cell @click="updateIt()" replace>
            <van-row>
            <van-col span="6">
              <!--cd图片 圆形图片 -->
              <van-image
                round
                width="3rem"
                height="3rem"
                :src="this.MusicIcon"
                />      
            </van-col>
            <van-col span="18">
              <div style="display:flex; align-items: center; justify-content: flex-start;">
          <h4>歌名: {{MusicName}}</h4> --- <label>作者: {{MusicAuthor}}</label>
        </div>
        <label>{{MusicDescription}}</label>
            </van-col>
          </van-row>
        </van-cell>
      </van-cell-group>
     </van-col>
      <!--删除 -->
      <van-col span="4">
        <!-- <van-button icon="@/assets/image/iconfont/deleteIt.png" >
       
        </van-button> -->
        <!-- <van-button   @click="deleteIt()" size="small" round> 删除</van-button> -->
        <van-icon size="1.5rem" @click="deleteIt()" name="http://rul4y8e5f.hn-bkt.clouddn.com/%E5%88%A0%E9%99%A4%20%282%29.png"></van-icon>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import MusicAPI from '@/api/MusicAPI.js'
export default {
 name: 'page2production',
 
 components: {
  [Dialog.Component.name]: Dialog.Component,
},

  created(){
    this.showMe = true
  },
 data() {
  return {
    showMe: true,
  }
 },
 methods: {
  updateIt(){
  
  this.$router.push({name: "userUpdateMusic",
  params:{
   id: this.MusicId
  }
 })
 },


 deleteMyMusic(){
     var result = MusicAPI.Delete2MyMusic(this.MusicId)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.$toast("删除成功！")
          // this.$router.go(0)
          this.showMe = false
        }else{
          console.log(val.errorMsg)
          this.$toast(val.errorMsg)
        }
            })
  },

 deleteIt(){
  Dialog.confirm({
  title: '确认删除',
  message: '音乐:《'+this.MusicName+"》 嘛？",
})
  .then(() => {
    // on confirm
    // 确认
    this.deleteMyMusic()

  })
  .catch(() => {
    // on cancel
    // 取消
  });
 },
 },



 props: {
  Id: {
      required: true,
      type: String
    },
    UserId: {
      required: true,
      type: String
    },
    MusicId: {
      required: true,
      type: String
    },
    MusicName: {
      required: true,
      type: String
    },
    
    MusicDescription:{
      required: true,
      type: String
    },
    MusicAuthor: {
      required: true,
      type: String
    },
    MusicIcon: {
      required: true,
      type: String
    },
    MusicUrl: {
      required: true,
      type: String
    }
    
 }
}
</script>

<style>

</style>